<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引入Bootstrap样式-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="angularjs/pagination.css"/>
    <link rel="stylesheet" href="layer/layer/theme/default/layer.css">
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer/layer.js"></script>
    <script type="text/javascript" src="angularjs/angular.min.js"></script>
    <script type="text/javascript" src="angularjs/pagination.js"></script>
    <script>
        var app=angular.module("MyApp",[]);
        app.controller("MyCrl",function ($scope, $http) {
            //获得所有用户
            $scope.findAllUsers=function () {
                $http.get("/user/findAllUsers").success(function (data) {
                    $scope.list=data;
                });
            };
            //删除用户
            $scope.deleteUser=function (uid) {
                $http.get("/user/deleteUserById?userid="+uid).success(function (data) {
                    index=layer.msg(data.msg,{icon:6});
                    $scope.findAllUsers();
                    layer.close(index);
                });
            };
            //修改打开模态框
            $scope.openModel=function (uid) {
                $("#updatemyModal").modal("show");
                $http.get("/user/findUserById?userid="+uid).success(function (data) {
                    $scope.userid=data.uid;
                    $scope.username=data.username;
                    $scope.userpwd=data.userpwd;
                });
            }
            //添加用户，清空模态框
            $scope.clearModel=function () {
                $("#addmyModal").modal("show");
                $scope.userid=0;
                $scope.username="";
                $scope.userpwd="";

            }
            //修改
            $scope.updateUser=function () {
                $http.get("/user/updateUser?uid="+$scope.userid+
                    "&username="+$scope.username+"&userpwd="+ $scope.userpwd).success(function (data) {
                    index=layer.msg(data.msg,{icon:6});
                  $scope.findAllUsers();
                    layer.close(index);
                });
            };
            //添加用户
            $scope.addUser=function(){
                $http.get("/user/addUser?uid="+$scope.userid+
                    "&username="+$scope.username+"&userpwd="+ $scope.userpwd).success(function (data) {
                    index=layer.msg(data.msg,{icon:6});
                    $scope.findAllUsers();
                    layer.close(index);
                });
            };
            //全选
            $scope.selectids=[];//用来接收用户选择的id
            $scope.UserChoose=function ($event,uid) {
                if ($event.target.checked){
                    $scope.selectids.push(uid);
                }else {
                    var index=$scope.selectids.indexOf(uid);
                    $scope.selectids.splice(index,1);
                }
            };
            $scope.batchDelete=function () {
                if ($scope.selectids.length==0){
                    layer.msg("至少选择一个",{icon:5});
                }else {
                    $http.get("/user/batchDelete?ids=" + $scope.selectids).success(function (data) {
                        index = layer.msg(data.msg, {icon: 6});
                        layer.close(index);

                    });
                }
            }
        });

    </script>
</head>
<body ng-app="MyApp" ng-controller="MyCrl" ng-init="findAllUsers()">
<div class="container">
    <div class="row">
        <div class="panel panel-primary">
            <div class="panel-heading">用户信息表</div>
            <div class="panel-body">
                <input type="text" ng-model="searchName"/>
                <button type="button" ng-click="findUserByKeyAndPage2()" class="btn btn-default">查询</button>
                <button type="button" ng-click="batchDelete()" class="btn btn-danger">批量删除</button>
                <button ng-click="clearModel()" class="btn btn-success" style="float: right">添加用户</button>
                <table class="table table-hover table-bordered text-center">
                    <tr>
                        <td><input type="checkbox" ng-model="AllChoose" ng-click="AllChooseMethod()"/></td>
                        <td>编号</td>
                        <td>用户名</td>
                        <td>用户密码</td>
                        <td>操作</td>
                    </tr>
                    <tr ng-repeat="u in list">
                        <td><input type="checkbox" ng-checked="AllChoose" ng-click="UserChoose($event,u.uid)"/></td>
                        <td>{{u.uid}}</td>
                        <td>{{u.username}}</td>
                        <td>{{u.userpwd}}</td>
                        <td>
                            <button ng-click="openModel(u.uid)"  class="btn btn-success">修改</button>
                            <a href="" ng-click="deleteUser(u.uid)" class="btn btn-danger">删除</a>
                        </td>
                    </tr >
                </table>
            </div>
        </div>
        <div class="modal fade" id="updatemyModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <input type="hidden" ng-model="userid" value="0"/>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">用户名:</label>
                            <div class="col-sm-10">
                                <input type="text" ng-model="username" class="form-control" id="inputEmail3" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
                            <div class="col-sm-10">
                                <input type="text" ng-model="userpwd" class="form-control" id="inputPassword3" placeholder="请输入密码">
                            </div>
                        </div>
                    </div>


                    <div class="modal-footer">
                        <button type="button" ng-click="updateUser()" class="btn btn-primary"
                                class="btn btn-success" data-dismiss="modal">提交</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal fade" id="addmyModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <input type="hidden" ng-model="userid" value="0"/>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">用户名:</label>
                            <div class="col-sm-10">
                                <input type="text" ng-model="username" class="form-control"  placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
                            <div class="col-sm-10">
                                <input type="text" ng-model="userpwd" class="form-control"  placeholder="请输入密码">
                            </div>
                        </div>
                    </div>


                    <div class="modal-footer">
                        <button type="button" ng-click="addUser()" class="btn btn-primary"
                                class="btn btn-success" data-dismiss="modal">提交</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>